import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:portal_website/pages/common_header.dart';

class DoubleSupportPage extends StatefulWidget {
  @override
  _DoubleSupportPageState createState() => _DoubleSupportPageState();
}

class _DoubleSupportPageState extends State<DoubleSupportPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _opacityAnimation;
  int _activeNavIndex = 2;

  @override
  void initState() {
    super.initState();
    // 页面加载动画
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
    _opacityAnimation = Tween<double>(begin: 0, end: 1).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.easeIn),
    );

    // 延迟执行动画
    Future.delayed(Duration(milliseconds: 100), () {
      _animationController.forward();
    });
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  // 导航菜单项
  final List<String> _navItems = ['首页', '政策法规', '双创支撑', '动态咨询', '企业云图', '联系我们'];

  // 资源卡片数据
  final List<ResourceCardData> _patentCards = [
    ResourceCardData(
      icon: '⚖️',
      name: '专利维权服务',
      type: '知识产权',
      description: '提供专利侵权分析、专利无效宣告、专利诉讼等维权服务，保护创业者的知识产权权益，维护市场竞争优势。',
      stats: ['成功率：85%', '周期：3-12个月'],
    ),
  ];

  final List<ResourceCardData> _rdSupportCards = [
    ResourceCardData(
      icon: '🧪',
      name: '技术咨询服务',
      type: '研发支持',
      description: '提供专业技术咨询服务，解决创业者在产品研发、工艺改进、质量控制等方面的技术难题，提升产品竞争力。',
      stats: ['专家团队：50+', '领域：多学科'],
    ),
    ResourceCardData(
      icon: '🤝',
      name: '产学研合作平台',
      type: '研发支持',
      description: '搭建高校、科研院所与企业的合作平台，促进技术转移和成果转化，加速创新技术的产业化进程。',
      stats: ['合作机构：30+', '转化项目：100+'],
    ),
    ResourceCardData(
      icon: '🏭',
      name: '中试基地',
      type: '研发支持',
      description: '提供中试生产场地和设备支持，帮助创业者完成从实验室到产业化的关键环节，降低技术转化风险。',
      stats: ['场地面积：5000㎡', '设备价值：2000万'],
    ),
  ];

  final List<ResourceCardData> _techSupportCards = [
    ResourceCardData(
      icon: '📏',
      name: '技术标准服务',
      type: '体系支撑',
      description: '提供国家标准、行业标准、企业标准的制定和咨询服务，帮助创业者规范产品技术指标，提升产品标准化水平。',
      stats: ['标准库：10000+', '更新频率：实时'],
    ),
    ResourceCardData(
      icon: '✅',
      name: '质量管理体系',
      type: '体系支撑',
      description: '提供ISO9001等质量管理体系认证咨询服务，帮助创业者建立完善的质量管理体系，提升产品质量和管理水平。',
      stats: ['认证周期：3-6个月', '通过率：98%'],
    ),
    ResourceCardData(
      icon: '🔬',
      name: '检测认证服务',
      type: '体系支撑',
      description: '提供产品检测、认证等一站式服务，包括CE、FCC、RoHS等',
      stats: [],
    ),
  ];

  // 特色功能数据
  final List<FeatureItemData> _featureItems = [
    FeatureItemData(
      icon: '📊',
      title: '技术评估',
      description: '提供技术成熟度、市场前景、投资价值等专业评估服务，为技术决策提供科学依据。',
    ),
    FeatureItemData(
      icon: '🌐',
      title: '国际对接',
      description: '搭建国际技术交流平台，促进国内外技术合作，帮助创业者获取全球创新资源。',
    ),
    FeatureItemData(
      icon: '💰',
      title: '技术融资',
      description: '为技术创新项目提供融资对接服务，包括政府资助、风险投资等多种融资渠道。',
    ),
    FeatureItemData(
      icon: '🤝',
      title: '技术对接',
      description: '根据创业者需求，精准匹配技术供需双方，促进技术合作和成果转化。',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _opacityAnimation,
      builder: (context, child) {
        return Opacity(
          opacity: _opacityAnimation.value,
          child: child,
        );
      },
      child: Expanded(
        child: Container(
          // padding: EdgeInsets.all(20),
          constraints: BoxConstraints(maxWidth: 1200),
          // margin: EdgeInsets.symmetric(horizontal: 10),
          child: Column(
            children: [
              // 页面标题区域
              Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Colors.white, Color(0xFFf0f8ff)],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                  borderRadius: BorderRadius.circular(15),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black12,
                      blurRadius: 20,
                      offset: Offset(0, 5),
                    ),
                  ],
                ),
                padding: EdgeInsets.symmetric(vertical: 40),
                margin: EdgeInsets.only(bottom: 60),
                width: double.infinity,
                child: Column(
                  children: [
                    Text(
                      '双创支撑',
                      style: TextStyle(
                        color: Color(0xFF1e3c72),
                        fontSize: 36,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 15),
                    Container(
                      constraints: BoxConstraints(maxWidth: 800),
                      padding: EdgeInsets.symmetric(horizontal: 20),
                      child: Text(
                        '为创业创新者提供全方位的支撑服务，包括知识产权保护、技术研发支持、技术标准体系等，助力创业者突破发展瓶颈，提升核心竞争力。',
                        style: TextStyle(
                          color: Color(0xFF555555),
                          fontSize: 16,
                          height: 1.8,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ],
                ),
              ),

              // 知识产权部分
              ContentDoubleSection(
                title: '⚖️ 知识产权',
                subtitle: 'Intellectual Property',
                content: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(bottom: 20),
                      child: Text(
                        '为创业创新者提供知识产权保护相关服务，包括专利申请、商标注册、版权登记以及专利维权等，保障创新成果的合法权益。',
                        style: TextStyle(
                          color: Color(0xFF555555),
                          fontSize: 16,
                          height: 1.8,
                        ),
                      ),
                    ),
                    ResourceGrid(cards: _patentCards),
                  ],
                ),
              ),

              // 技术研发支持部分
              ContentDoubleSection(
                title: '🔬 技术研发支持',
                subtitle: 'R&D Support',
                content: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(bottom: 20),
                      child: Text(
                        '为创业创新者提供研发方面的技术支持以及实际应用，包括技术咨询、研发合作、成果转化等服务，帮助创业者突破技术瓶颈，实现技术成果的商业化应用。',
                        style: TextStyle(
                          color: Color(0xFF555555),
                          fontSize: 16,
                          height: 1.8,
                        ),
                      ),
                    ),
                    ResourceGrid(cards: _rdSupportCards),
                  ],
                ),
              ),

              // 技术支撑体系部分
              ContentDoubleSection(
                title: '🛠️ 技术支撑体系',
                subtitle: 'Technical Support System',
                content: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(bottom: 20),
                      child: Text(
                        '为创业创新者提供关于体系支撑方面的知识，包括技术标准、质量管理、检测认证等服务，帮助创业者建立完善的技术支撑体系，提升产品质量和市场竞争力。',
                        style: TextStyle(
                          color: Color(0xFF555555),
                          fontSize: 16,
                          height: 1.8,
                        ),
                      ),
                    ),
                    ResourceGrid(cards: _techSupportCards),
                  ],
                ),
              ),

              // 特色功能部分
              ContentDoubleSection(
                title: '🌟 特色服务',
                subtitle: 'Featured Services',
                content: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(bottom: 20),
                      child: Text(
                        '除了上述核心服务外，我们还提供一系列特色服务，全方位满足创业创新者的多样化需求。',
                        style: TextStyle(
                          color: Color(0xFF555555),
                          fontSize: 16,
                          height: 1.8,
                        ),
                      ),
                    ),
                    FeatureGrid(items: _featureItems),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 资源卡片数据模型
class ResourceCardData {
  final String icon;
  final String name;
  final String type;
  final String description;
  final List<String> stats;

  ResourceCardData({
    required this.icon,
    required this.name,
    required this.type,
    required this.description,
    required this.stats,
  });
}

// 资源网格组件
class ResourceGrid extends StatelessWidget {
  final List<ResourceCardData> cards;

  ResourceGrid({required this.cards});

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      crossAxisCount: MediaQuery.of(context).size.width < 768 ? 1 : 3,
      crossAxisSpacing: 30,
      mainAxisSpacing: 30,
      childAspectRatio: 350 / 400,
      children: cards.map((card) => ResourceCard(data: card)).toList(),
    );
  }
}

// 资源卡片组件
class ResourceCard extends StatelessWidget {
  final ResourceCardData data;

  ResourceCard({required this.data});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Color(0xFFe1e8ed)),
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black54,
            blurRadius: 15,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        children: [
          // 卡片图标区域
          Container(
            height: 200,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Color(0xFF4facfe), Color(0xFF00f2fe)],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
            ),
            child: Center(
              child: Text(
                data.icon,
                style: TextStyle(
                  fontSize: 48,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          // 卡片内容
          Padding(
            padding: EdgeInsets.all(25),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  data.name,
                  style: TextStyle(
                    color: Color(0xFF1e3c72),
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Color(0xFF4facfe), Color(0xFF00f2fe)],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Text(
                    data.type,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 12,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  margin: EdgeInsets.only(bottom: 15),
                ),
                Text(
                  data.description,
                  style: TextStyle(
                    color: Color(0xFF666666),
                    height: 1.7,
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                if (data.stats.isNotEmpty)
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: data.stats.map((stat) {
                      return Text(
                        stat,
                        style: TextStyle(
                          color: Color(0xFF888888),
                          fontSize: 13,
                        ),
                      );
                    }).toList(),
                  ),
              ],
            ),
          ),
        ],
      ),
      // 悬停效果
      transform: Matrix4.identity(),
      // transition: BoxDecoration(
      //   boxShadow: [
      //     BoxShadow(
      //       color: Color(0xFF1e3c72).withOpacity(0.15),
      //       blurRadius: 30,
      //       offset: Offset(0, 10),
      //     ),
      //   ],
      //   border: Border.all(color: Color(0xFF4facfe)),
      // ),
    );
  }
}

// 特色功能数据模型
class FeatureItemData {
  final String icon;
  final String title;
  final String description;

  FeatureItemData({
    required this.icon,
    required this.title,
    required this.description,
  });
}

// 特色功能网格组件
class FeatureGrid extends StatelessWidget {
  final List<FeatureItemData> items;

  FeatureGrid({required this.items});

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      crossAxisCount: MediaQuery.of(context).size.width < 768 ? 1 : 2,
      crossAxisSpacing: 25,
      mainAxisSpacing: 25,
      childAspectRatio: 280 / 200,
      children: items.map((item) => FeatureItem(data: item)).toList(),
    );
  }
}

// 特色功能项组件
class FeatureItem extends StatelessWidget {
  final FeatureItemData data;

  FeatureItem({required this.data});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFFf8fbff), Color(0xFFf0f8ff)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        border: Border.all(color: Color(0xFFe1e8ed)),
        borderRadius: BorderRadius.circular(12),
      ),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 30),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            data.icon,
            style: TextStyle(
              fontSize: 40,
              color: Color(0xFF1e3c72),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Text(
            data.title,
            style: TextStyle(
              color: Color(0xFF1e3c72),
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Text(
            data.description,
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 14,
              height: 1.6,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}
